/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

//http://stackoverflow.com/questions/2293483/creating-a-simple-drawing-area-widget-with-google-closure

goog.provide('cz.mzk.kramerius.audio.image');
goog.provide('cz.mzk.kramerius.audio.image.Image');

goog.require('goog.dom');
goog.require('goog.Timer');
goog.require('goog.math');
//goog.require('cz.mzk.kramerius.audio.Playlist');

//goog.require('goog.dom.DomHelper');
//goog.require('graphics.ext.Image');

goog.require('goog.graphics.CanvasGraphics');
goog.require('goog.graphics.SolidFill');

cz.mzk.kramerius.audio.image.appendRotatingImage = function(recordDiv, imageUrl, playlist){
    var image = new cz.mzk.kramerius.audio.image.Image(imageUrl, playlist);
    // cz.mzk.kramerius.audio.image.testBuilder(recordDiv);
    //var dom = image.makeDom(recordDiv);
    //goog.dom.appendChild(recordDiv, dom);
    goog.dom.appendChild(recordDiv, image.canvas);
//goog.events.listen(image.canvas, goog.events.EventType.CLICK, this.openEditor);
}


cz.mzk.kramerius.audio.image.Image = function(img, playlist){
    this.playlist = playlist;
    this.img_ = img;
    //this.url_ = url;
    this.rotating = false;
    this.canvas = this.createCanvas_(400,400);
    this.center_(this.canvas.getContext("2d"));
    this.drawCross_();
    this.draw_();
    //goog.events.listen(this.canvas, goog.events.EventType.CLICK, this.rotate_, false, this);
    this.timer = new goog.Timer(50);
    this.timer.start();
    goog.events.listen(this.timer, goog.Timer.TICK, this.rotate_, false, this);
    goog.events.listen(this.canvas, goog.events.EventType.CLICK, this.startOrStopRotating_, false, this);
    goog.events.listen(this.canvas, goog.events.EventType.CLICK, this.pausePlaying_, false, this);
}

/**
 * @private
 */
cz.mzk.kramerius.audio.image.Image.prototype.createCanvas_ = function(width, height){
    var canvas = goog.dom.createDom('canvas',{
        'id':'rotatingRecordCanvas',
        'width':width,  
        'height':height
    });
    var fallbackText = goog.dom.createTextNode("Vas prohlizec nepodporuje HTML5 canvas");
    canvas.appendChild(fallbackText);
    return canvas;
}

cz.mzk.kramerius.audio.image.Image.prototype.pausePlaying_ = function(event){
    console.log("playing: " + this.playlist.playing);
    //    if (this.playlist.playing){
    //        this.playlist.pause();
    //    }else{
    //        this.playlist.resume();
    //    }

    var track = this.playlist.nowPlaying;
    if (track == undefined){
        this.playlist.play(0);
    }else if (track.paused){
        track.resume();
    }else {
        track.pause();
    }
    
}

cz.mzk.kramerius.audio.image.Image.prototype.startOrStopRotating_ = function(event){
    if (this.rotating){
        this.rotating = false;
    }else{
        this.rotating = true;
    }
}


cz.mzk.kramerius.audio.image.Image.prototype.drawCross_ = function(){
    var ctx = this.canvas.getContext("2d");
    ctx.fillStyle="red";
    
    var up = -this.canvas.height/2;
    var down = this.canvas.height/2;
    var left = -this.canvas.width/2;
    var right = this.canvas.width/2;
    //console.log("up: " + up, " down: " + down + ", right: " + right + ", left: " + left);        

    //okraje
    ctx.moveTo(left,up);
    ctx.lineTo(left,down);
    ctx.lineTo(right,down);
    ctx.lineTo(right,up);
    ctx.lineTo(left,up);
    
    //kriz
    ctx.moveTo(left,up);
    ctx.lineTo(right,down);
    ctx.moveTo(right,up);
    ctx.lineTo(left,down);
    ctx.stroke();
    
    var squareSize = 5;
    ctx.fillRect(left,up,squareSize,squareSize);
    ctx.fillRect(left,down-squareSize,squareSize,squareSize);
    ctx.fillRect(right-squareSize,up,squareSize,squareSize);
    ctx.fillRect(right-squareSize,down-squareSize,squareSize,squareSize);
    
    ctx.fillRect(left/2,up/2,squareSize,squareSize);
    ctx.fillRect(left/2,down/2-squareSize,squareSize,squareSize);
    ctx.fillRect(right/2-squareSize,up/2,squareSize,squareSize);
    ctx.fillRect(right/2-squareSize,down/2-squareSize,squareSize,squareSize);
    
    ctx.fillRect(left/4,up/4,squareSize,squareSize);
    ctx.fillRect(left/4,down/4-squareSize,squareSize,squareSize);
    ctx.fillRect(right/4-squareSize,up/4,squareSize,squareSize);
    ctx.fillRect(right/4-squareSize,down/4-squareSize,squareSize,squareSize);
}

cz.mzk.kramerius.audio.image.Image.prototype.center_ = function(ctx){
    var centerX = this.canvas.width / 2;
    var centerY = this.canvas.height / 2;
    console.log("center: " + centerX, ", " + centerY);
    ctx.translate(centerX, centerY);
}

cz.mzk.kramerius.audio.image.Image.prototype.rotate_ = function(event){
    //this.center_(context);
    if (this.rotating){
        this.clear_();
        //context.clearRect(0,0,400,400);
        var context = this.canvas.getContext("2d");
        var random = goog.math.randomInt(3);
        //var rotation = Math.PI / (14 + random);
        var rotation = Math.PI / 100;
        //  console.log("rotating " + rotation);
        context.rotate(Math.PI / rotation);
    
        //this.clear_();
        this.draw_(context);
    }
}

cz.mzk.kramerius.audio.image.Image.prototype.clear_ = function(){
    // console.log("clearing");
    var context = this.canvas.getContext("2d");
    context.clearRect(-this.canvas.width/2,-this.canvas.height/2,this.canvas.width,this.canvas.height);
//this.drawCross_();
}



cz.mzk.kramerius.audio.image.Image.prototype.draw_ = function(){
    // console.log("drawing");
    var context = this.canvas.getContext("2d");
    //    context.fillStyle = "blue";
    //    var rectWidth = 50;
    //    var rectHeight = 80;
    //    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);

//   var pic = goog.dom.createDom('img',{
//        'id':'recordImage',
//        'url':this.url_,  
//        //'hidden':"hidden"
//    });

    //var pic = document.getElementById('record_pic');
    
    //console.log(pic);
    //context.drawImage(pic,-64,-64);
    context.drawImage(this.img_,-64,-64);
}

cz.mzk.kramerius.audio.image.testBuilder = function(parent){
    var helper = new goog.dom.DomHelper(null);
    var textNode = helper.createTextNode("test");
    goog.dom.appendChild(parent, textNode);
}






